<!--
 * @FilePath: src/views/Dashboard/ChemicalElement.vue
 * @Description: ChemicalElement.vue
-->
<template>
  <div class="chemical-element-container">
    <table class="table-echarts" border="1">
      <col-group :cols="[5, 5, 5, ...new Array(17).fill(8)]" />
      <tr style="height: 4rem">
        <td rowspan="2">井深</td>
        <td rowspan="2">地层</td>
        <!-- <td rowspan="2">砂体</td> -->
        <td rowspan="2">岩性解释</td>
        <td rowspan="2">岩性</td>

        <template v-for="(it, i) in datasource">
          <td :key="'chart_' + i">
            <div class="small-title">{{ datasource[i].name }}</div>
            <div class="small-card">
              <span class="float-left">{{ datasource[i].min }}</span>
              <span class="float-right">{{ datasource[i].max }}</span>
            </div>
          </td>
        </template>
      </tr>
      <tr style="height: 2rem; line-height: 2rem">
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
        <td>%</td>
      </tr>
      <tr class="tr-echart" :style="styles">
        <td>
          <div ref="chart1" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart2" class="td-echart"></div>
        </td>
        <!-- 砂体 -->
        <!-- <td>
          <div ref="chart3" class="td-echart"></div>
        </td> -->
        <td>
          <div ref="chart4" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart5" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart6" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart7" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart8" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart9" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart10" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart11" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart12" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart13" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart14" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart15" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart16" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart17" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart18" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart19" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart20" class="td-echart"></div>
        </td>
        <td>
          <div ref="chart21" class="td-echart"></div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import ColGroup from "./ColGroup.vue"
import { mockdata, splitArrayRandomly, explainOption, yxOption } from "./element.js"
import { dataset_head, dataset } from "./dataset/element-cross.js"

const elementFn = col => dataset.map(t => [t[col], t[0]])

const datasource = dataset_head
  .filter((_, i) => i > 0)
  .map((el, i) => {
    const ds = { name: el, data: elementFn(i + 1) }
    const min = Math.max(0, Math.min(...ds.data.map(t => t[0])))
    const max = Math.max(...ds.data.map(t => t[0]))
    ds.min = Math.floor(min / 5.0) * 5
    ds.max = Math.ceil(max / 5.0) * 5
    return ds
  })

export default {
  name: "ChemicalElement",
  components: { ColGroup },
  data() {
    return {
      datasource,
      styles: {},
      depths: [],
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
      chart7: null,
      chart8: null,
      chart9: null,
      chart10: null,
      chart11: null,
      chart12: null,
      chart13: null,
      chart14: null,
      chart15: null,
      chart16: null,
      chart17: null,
      chart18: null,
      chart19: null,
      chart20: null,
      chart21: null,
      ymin: null,
      ymax: null
    }
  },
  mounted() {
    this.$nextTick().then(this.refreshHeight).then(this.initialize).then(this.renderEchart)
  },
  methods: {
    refreshHeight() {
      const length = dataset.length
      const h = 800 + (5000 * length) / 8000
      this.styles = {
        height: `${Math.min(h, 8800)}px`
      }
      // 初始化图表
      Array.from(document.querySelectorAll(".td-echart")).forEach(div => {
        div.style.width = div.parentElement.style.width
        div.style.height = `${Math.min(h, 5800)}px`
      })
    },
    initialize() {
      this.chart1 = this.$echarts.init(this.$refs.chart1)
      this.chart2 = this.$echarts.init(this.$refs.chart2)
      // this.chart3 = this.$echarts.init(this.$refs.chart3)
      this.chart4 = this.$echarts.init(this.$refs.chart4)
      this.chart5 = this.$echarts.init(this.$refs.chart5)
      this.chart6 = this.$echarts.init(this.$refs.chart6)
      this.chart7 = this.$echarts.init(this.$refs.chart7)
      this.chart8 = this.$echarts.init(this.$refs.chart8)
      this.chart9 = this.$echarts.init(this.$refs.chart9)
      this.chart10 = this.$echarts.init(this.$refs.chart10)
      this.chart11 = this.$echarts.init(this.$refs.chart11)
      this.chart12 = this.$echarts.init(this.$refs.chart12)
      this.chart13 = this.$echarts.init(this.$refs.chart13)
      this.chart14 = this.$echarts.init(this.$refs.chart14)
      this.chart15 = this.$echarts.init(this.$refs.chart15)
      this.chart16 = this.$echarts.init(this.$refs.chart16)
      this.chart17 = this.$echarts.init(this.$refs.chart17)
      this.chart18 = this.$echarts.init(this.$refs.chart18)
      this.chart19 = this.$echarts.init(this.$refs.chart19)
      this.chart20 = this.$echarts.init(this.$refs.chart20)
      this.chart21 = this.$echarts.init(this.$refs.chart21)

      const depths = dataset.map(t => t[0])
      this.ymin = Math.floor(Math.min(...depths) / 5.0) * 5
      this.ymax = Math.ceil(Math.max(...depths) / 5.0) * 5
      this.depths = depths
      // 修正宽度
      Array.from(document.querySelectorAll(".td-echart")).forEach(div => {
        div.childNodes[0].style.width = div.style.width
      })
    },
    renderEchart() {
      this.renderEchart1()
      this.renderEchart2()
      this.renderEchart3()
      this.renderEchart4()
      this.renderEchart5()

      this.renderElementEchart(this.chart6, datasource[0])
      this.renderElementEchart(this.chart7, datasource[1])
      this.renderElementEchart(this.chart8, datasource[2])
      this.renderElementEchart(this.chart9, datasource[3])
      this.renderElementEchart(this.chart10, datasource[4])
      this.renderElementEchart(this.chart11, datasource[5])
      this.renderElementEchart(this.chart12, datasource[6])
      this.renderElementEchart(this.chart13, datasource[7])
      this.renderElementEchart(this.chart14, datasource[8])
      this.renderElementEchart(this.chart15, datasource[9])
      this.renderElementEchart(this.chart16, datasource[10])
      this.renderElementEchart(this.chart17, datasource[11])
      this.renderElementEchart(this.chart18, datasource[12])
      this.renderElementEchart(this.chart19, datasource[13])
      this.renderElementEchart(this.chart20, datasource[14])
      this.renderElementEchart(this.chart21, datasource[15])
    },
    renderElementEchart($chart, ds) {
      const { name: title, data } = ds
      const { ymin, ymax } = this
      const option = {
        title: {
          text: title,
          left: "center",
          top: "top",
          show: false
        },
        grid: {
          top: "0",
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true
        },
        toolbox: {},
        tooltip: {
          trigger: "axis",
          axisPointer: { axis: "y" }
        },
        yAxis: {
          min: ymin,
          max: ymax,
          inverse: true,
          axisTick: { show: false },
          axisLabel: { show: false },
          axisLine: { show: false },
          splitLine: { show: false }
        },
        xAxis: {
          name: title,
          axisTick: { show: false },
          axisLabel: { show: false },
          axisLine: { show: false },
          splitNumber: 10,
          splitLine: { show: true, lineStyle: { color: "#9afefe" } }
        },
        series: [
          {
            showSymbol: false,
            lineStyle: { color: "red", width: 1 },
            name: title,
            data: data,
            type: "line",
            encode: { tooltip: 0 },
            smooth: true,
            itemStyle: {
              color: "red" // 数据点颜色
            }
          }
        ]
      }
      $chart.setOption(option)
      $chart.resize()
    },
    // 深度
    renderEchart1() {
      const { ymin, ymax, depths } = this
      const w1 = this.$refs.chart1.clientWidth
      const option = {
        grid: {
          top: "0",
          left: `${w1}px`,
          right: "0",
          bottom: "0",
          show: false,
          containLabel: false
        },
        xAxis: {
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          minorSplitLine: { show: false },
          axisLabel: { show: false }
        },
        yAxis: {
          inverse: true,
          position: "left",
          axisTick: {
            show: false
          },
          type: "value",
          min: ymin,
          max: ymax,
          interval: 10,
          // data: depth,
          splitLine: {
            show: false,
            lineStyle: { type: "dashed", color: "#8accc5" }
          },
          axisTick: {
            show: true,
            length: 3
          },
          axisLabel: {
            verticalAlign: "middle",
            show: true,
            fontSize: 10,
            margin: 3
          }
        }
      }
      this.chart1.setOption(option)
      this.chart1.resize()
    },
    // 岩层
    renderEchart2() {
      const { ymin, ymax, depths } = this

      const segments = splitArrayRandomly(depths, 4)
      const levels = ["韩江组", "珠江组", "珠海组", "粤海组", "前古近系"]
      const series = []
      for (let index = 0; index < segments.length - 1; index++) {
        series.push({
          name: levels[index],
          type: "bar",
          stack: "total",
          barWidth: "100%",
          label: {
            show: true,
            formatter: params => levels[index]
          },
          data: [segments[index + 1][0]]
        })
      }
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: false
        },
        yAxis: {
          type: "value",
          inverse: true,
          min: ymin,
          max: ymax
        },
        tooltip: {},
        legend: { data: series.map(t => t.name), show: false },
        xAxis: {
          type: "category",
          data: [""]
        },
        series
      }
      this.chart2.setOption(option)
      this.chart2.resize()
    },
    renderEchart3() {},
    renderEchart4() {
      const { ymin, ymax, depths } = this
      explainOption.yAxis[0].min = ymin
      explainOption.yAxis[0].max = ymax
      this.chart4.setOption(explainOption)
      this.chart4.resize()
    },
    renderEchart5() {
      const { ymin, ymax, depths } = this
      yxOption.yAxis[0].min = ymin
      yxOption.yAxis[0].max = ymax
      this.chart5.setOption(yxOption)
      this.chart5.resize()
    }
  }
}
</script>

<style scoped>
.chemical-element-container {
  padding: 1rem;
}
.table-echarts {
  width: 100%;
  border-collapse: collapse;
  width: 100%;
  min-height: calc(100% - 300px);
  text-align: center;
  vertical-align: middle;
}
div.small-card {
  padding: 0.25rem 1px 0;
  font-size: small;
}
.td-echart {
  height: 100%;
  min-height: 800px;
}
.td-echart > div {
  width: 100% !important;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
</style>
